import VueRouter from "vue-router";
import Vue from "vue";

Vue.use(VueRouter)

const Home = ()=>import("@/pages/Home")
const Login = ()=>import("@/pages/Login")
const NotFound = ()=>import("@/pages/NotFound")
const News = ()=>import("@/pages/Home/News")
const Game = ()=>import("@/pages/Home/Game")
const Music = ()=>import("@/pages/Home/Music")
const MusicDetail = ()=>import("@/pages/Home/Music/MusicDetail")
const NewsDetail = ()=>import("@/pages/Home/News/NewsDetail")
const GameDetail = ()=>import("@/pages/Home/Game/GameDetail")


const router = new VueRouter({
    mode:"history",
    routes:[
        {
          path:"",
          redirect:"/home"
        },
        {
            path:"/home",
            component:Home,
            children:[
                {
                  path:"",
                  redirect:"news"
                },
                {
                    path:"news",
                    name:"News",
                    component:News,
                    children:[
                        {
                            path: "newsdetail",
                            name:"NewsDetail",
                            component:NewsDetail,
                            props:(route)=>{
                                // console.log(route)
                                return{
                                    ...route.params,
                                    ...route.query,
                                    num:1
                                }
                            }
                        }
                    ]
                },
                {
                    path:"music",
                    name:"Music",
                    component:Music,
                    children:[
                        {
                            path:"musicdetail/:id/:age",
                            component:MusicDetail,
                            name:"MusicDetail",
                            //路由独享守卫
                            beforeEnter: (to, from, next) => {
                                console.log(to, from, next);
                                console.log("我是Music的独享守卫");
                                next();
                            },
                        }
                    ]
                },
                {
                    path:"game",
                    name:"Game",
                    component:Game,
                    children:[
                        {
                            path:"gamedetail",
                            component:GameDetail,
                            meta:{
                                hidden:true,
                                icon:"ok"
                            },
                            props:(route)=>{
                                return{
                                    ...route.meta
                                }
                            },
                        }
                    ],

                },
            ]
        },
        {
            path:"/login",
            component:Login,
            name:"Login",

        },
        {
            path:"/*",
            component:NotFound
        }
    ]
});
//全局前置守卫
router.beforeEach((to, from, next) => {
    /*
      to:要去的路由对象
      from:来源的路由对象
      next:是一个函数,必须书写,否则直接停止到当前位置
        + next():直接放行
        + next(false):中断当前导航
        + next(string|location):指定导航地址
    */
    console.log(to, from, next, "全局前置守卫");

    next();
    // next("/login");
});

/*
  全局解析守卫:
  在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
  注释:当我们访问某个路由的时候,当前路由组件被解析,并且组件内守卫也触发了,但是还没有把路由组件交给router-view展示(导航确认之前)
*/
router.beforeResolve((to, from, next) => {
    console.log(to, from, next, "全局解析守卫");
    next();
});

router.afterEach((to, from) => {
    console.log(to, from, "afterEach全局后置钩子");
});

export default router